<!--
 * @Author: hq
 * @Date: 2022-05-27 14:18:02
 * @LastEditors: hq
 * @LastEditTime: 2022-07-19 10:47:40
 * @Description: your project
 * @version: 1.0
-->
<template>
  <div>
    <div class="row">
      <div class="col">
        <div>昵称：</div>
        <div>{{ rowData.nickname }}</div>
      </div>
      <div class="col">
        <div>手机号：</div>
        <div>{{ rowData.phone }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>头像：</div>
        <el-image
          v-if="rowData.avatar"
          style="width: 100px; height: 100px"
          :src="rowData.avatar.src"
          :preview-src-list="avatarArr"
        >
        </el-image>
      </div>

      <div class="col">
        <div>邮箱：</div>
        <div v-if="rowData.email !== ''">{{ rowData.email }}</div>
        <div v-else>暂未绑定</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>生日：</div>
        <div v-if="rowData.birthday !== ''">{{ rowData.birthday }}</div>
        <div v-else>暂无</div>
      </div>
      <div class="col">
        <div>个人简介：</div>
        <div v-if="rowData.introduction !== ''">{{ rowData.introduction }}</div>
        <div v-else>暂无</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>注册时间：</div>
        <div>{{ rowData.create_time }}</div>
      </div>
      <div class="col">
        <div>更新时间：</div>
        <div>{{ rowData.update_time }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>绑定微信：</div>
        <div v-if="rowData.wx_uni !== ''">{{ rowData.wx_uni }}</div>
        <div v-else>暂未绑定</div>
      </div>
    </div>
    <div class="title">推荐人信息：</div>
    <div class="row">
      <div class="col">
        <div>推荐人id：</div>
        <div>{{ rowData.recom.id }}</div>
      </div>
      <div class="col">
        <div>推荐人昵称：</div>
        <div>{{ rowData.recom.nickname }}</div>
      </div>
    </div>
    <div class="row">
      <div class="col">
        <div>推荐人手机号：</div>
        <div>{{ rowData.recom.phone }}</div>
      </div>
      <div class="col">
        <div>推荐人邀请码：</div>
        <div>{{ rowData.recom.show_id }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { user_detail } from "@/api/member";
export default {
  props: ["rowId"],
  data() {
    return {
      rowData: [],
      avatarArr: [],
    };
  },
  methods: {
    async user_detail() {
      const { data, err } = await user_detail({
        id: this.rowId,
      });
      if (err === 0) {
        this.avatarArr.push(data.avatar.src);
        this.rowData = data;
      }
    },
  },
  created() {
    // this.rowData = this.rowId;
    this.user_detail();
  },
};
</script>

<style lang="scss" scoped>
.row {
  display: flex;
  padding: 0 0 20px 20px;
  box-sizing: border-box;
  font-size: 13px;

  .col {
    width: 50%;
    display: flex;
    align-items: center;
    div:nth-child(1) {
      flex-shrink: 0;
    }
  }
}
.title {
  font-weight: bold;
  margin-bottom: 10px;
}
</style>
